
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Drawer, Form, Button, Col, Row, Input, Select, InputNumber, Radio, TreeSelect, Icon } from 'antd';
import IconSelect from 'components/form/IconSelect';


// 与model建立连接
@connect(({ sysMenuModel }) => ({
    addShowVisible: sysMenuModel.addShowVisible,
    menuTreeData: sysMenuModel.menuTreeData,
    add_parent_id: sysMenuModel.add_parent_id
}))
@Form.create()
class Add extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            //用于重新加载数据项
            fromKey: Math.random()
        };
    }

    componentDidMount() {
    }

    onClose = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'sysMenuModel/updateState',
            payload: { addShowVisible: false },
        });
    };

    submitModel = (params) => {
        const { dispatch } = this.props;
        let that = this;
        dispatch({
            type: "sysMenuModel/addRowData",
            payload: params,
            callback: (res) => {
                if (res) {
                    that.props.form.resetFields();
                    that.setState({ fromKey: Math.random() });
                }
            }
        });
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((errors, values) => {
            if (!errors) {
                console.log("提交数据", values)
                let subData = values;
                //向model传递数据
                this.submitModel({ subData });
            }
        });
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        const { addShowVisible, menuTreeData, add_parent_id } = this.props;
        const { fromKey } = this.state;
        const { onClose, handleSubmit } = this;
        return (
            <div>
                <Drawer
                    title="新增"
                    width={720}
                    onClose={onClose}
                    visible={addShowVisible}
                >
                    <Form layout="vertical" key={fromKey}>

                        <Row gutter={16}>

                            <Col span={12}>
                                <Form.Item label="菜单名称">
                                    {getFieldDecorator('menu_name', {
                                        valuePropName: 'value',
                                        initialValue: '',
                                        rules: [{ required: true, message: '请填写菜单名称' }],
                                    })(<Input placeholder="请填写菜单名称" allowClear ></Input>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="父菜单">
                                    {getFieldDecorator('parent_id', {
                                        valuePropName: 'value',
                                        initialValue: add_parent_id,
                                        rules: [{ required: false, message: '请填写父菜单' }],
                                    })(<TreeSelect placeholder="请选择父菜单" searchPlaceholder="搜索" disabled={add_parent_id != ""} treeNodeFilterProp="title" showSearch={true} placeholder="请选择父菜单" treeData={menuTreeData} allowClear ></TreeSelect>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16}>

                            <Col span={12}>
                                <Form.Item label="显示顺序">
                                    {getFieldDecorator('order_num', {
                                        valuePropName: 'value',
                                        initialValue: '',
                                        rules: [{ required: false, message: '请填写显示顺序' }],
                                    })(<InputNumber placeholder="请填写显示顺序" allowClear ></InputNumber>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="请求地址">
                                    {getFieldDecorator('url', {
                                        valuePropName: 'value',
                                        initialValue: '',
                                        rules: [{ required: true, message: '请填写请求地址' }],
                                    })(<Input placeholder="请填写请求地址" allowClear ></Input>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16}>

                            <Col span={12}>
                                <Form.Item label="菜单类型">
                                    {getFieldDecorator('menu_type', {
                                        valuePropName: 'value',
                                        initialValue: "M",
                                        rules: [{ required: true, message: '请填写菜单类型' }],
                                    })(<Radio.Group allowClear>
                                        <Radio value="M">目录</Radio>
                                        <Radio value="C">菜单</Radio>
                                        <Radio value="B">按钮</Radio>
                                    </Radio.Group>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="菜单状态">
                                    {getFieldDecorator('visible', {
                                        valuePropName: 'value',
                                        initialValue: "1",
                                        rules: [{ required: true, message: '请填写菜单状态（0显示 1隐藏）' }],
                                    })(<Radio.Group allowClear>
                                        <Radio value="1">显示</Radio>
                                        <Radio value="0">隐藏</Radio>
                                    </Radio.Group>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16}>

                            <Col span={12}>
                                <Form.Item label="权限标识">
                                    {getFieldDecorator('perms', {
                                        valuePropName: 'value',
                                        initialValue: '',
                                        rules: [{ required: true, message: '请填写权限标识' }],
                                    })(<Input placeholder="请填写权限标识" allowClear ></Input>)}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="菜单图标">
                                    {getFieldDecorator('icon', {
                                        valuePropName: 'value',
                                        initialValue: "",
                                        rules: [{ required: false, message: '请填写菜单图标' }],
                                    })(<IconSelect ></IconSelect>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16}>

                            <Col span={12}>
                                <Form.Item label="备注">
                                    {getFieldDecorator('remark', {
                                        valuePropName: 'value',
                                        initialValue: '',
                                        rules: [{ required: false, message: '请填写备注' }],
                                    })(<Input.TextArea placeholder="请填写备注" allowClear ></Input.TextArea>)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <div className="drawerBottombutton">
                            <Button onClick={handleSubmit} type="primary" style={{ marginRight: 8 }}>提交</Button>
                            <Button onClick={onClose}>取消</Button>
                        </div>
                    </Form>
                </Drawer>
            </div>
        );
    }
}

export default Add;